<script setup>
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/user'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

//菜单跳转
const router = useRouter()
const onSelect = (val) => {
  router.push(val)
}

//菜单收缩
const userStore = useUserStore()
//拿到菜单数据及菜单收拾的判断值
const { isMenu, menus } = storeToRefs(userStore)

//默认选中当前路由
const route = useRoute()
const defaultActive = ref(route.path)

//监听路由变化
onBeforeRouteUpdate((to, from) => {
  defaultActive.value = to.path
})
</script>

<template>
  <div class="menu">
    <div class="logo">
      <img class="img" src="@/assets/img/logo.png" alt="logo" />
      <span class="title">Sokach后台管理系统</span>
    </div>
    <el-menu
      text-color="#b7bdc3"
      active-text-color="#fff"
      background-color="#001529"
      class="el-menu-vertical-demo"
      :default-active="defaultActive"
      @select="onSelect"
      :collapse="isMenu"
      unique-opened
    >
      <template v-for="(item, index) in menus" :key="index">
        <el-sub-menu v-if="item.child && item.child.length > 0" :index="item.name">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="(item2, index2) in item.child"
            :key="index2"
            :index="item2.frontpath"
          >
            <el-icon> <component :is="item2.icon"></component> </el-icon>
            <span>{{ item2.name }}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.frontpath">
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<style scoped>
.menu {
  width: 250px;
}
.el-menu {
  border-right: none;
  user-select: none;
  /* background-color: #001529; */
}

.logo {
  display: flex;
  height: 60px;
  padding: 12px 10px 8px 0px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  /* background-color: red; */
}

.img {
  height: 100%;
  margin: 0 10px;
}

.title {
  font-size: 15px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}

.el-sub-menu .el-menu-item {
  padding-left: 50px !important;
  background-color: #0c2135;
}

.el-menu-item:hover {
  color: #fff;
}
</style>
